<template>
    <div class="manage2">
        <el-button type="primary" class="manage2_button3" @click="addShow = true; addData = {}">添加banner</el-button>
    </div>
    <div class="list1" v-loading="loading">
        <el-table ref="selectTable" :data="list1">
            <el-table-column fixed min-width="200" label="图片" show-overflow-tooltip>
                <template #default="scope">
                    <img :src="scope.row.img" class="list1_head1">
                </template>
            </el-table-column>
            <el-table-column prop="createTime" min-width="120" label="创建时间"></el-table-column>
            <!-- <el-table-column min-width="120" label="是否显示">
                <template #default="scope">
                    {{ scope.row.isShow == 1 ? '显示' : '不显示' }}
                </template>
            </el-table-column> -->

            <el-table-column prop="sort" min-width="120" label="排序"></el-table-column>

            <el-table-column prop="lei4xing2" min-width="120" label="类型">
                <template #default="scope">
                    {{ typeS[scope.row.type] }}
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                        <el-button @click="tanchuang2(scope.row.bannerId)" text type="primary">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog v-model="addShow" title="添加banner" width="760px" close-on-click-modal="false">
        <el-form :model="addData" ref="submitForm" label-width="auto" :rules="rules">
            <el-form-item label="banner图：" prop="coverImg">
                <el-upload :headers="{ token: $store.state.token }" :action="uploadUrl" :on-success="uploadImgSuccess"
                    accept="image/*" class="avatar-uploader" name="file" :show-file-list="false">
                    <img v-if="addData.img" :src="addData.img" style="width: 300px;" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="类型：" prop="coverImg">
                <el-select v-model="addData.type" placeholder="请选择类型" class="w180">
                    <el-option v-for="(item, index) in typeL" :key="index" :label="item.name" :value="item.type" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="链接类型：" prop="coverImg">
                <el-select v-model="addData.linkType" placeholder="请选择链接类型" class="w180">
                    <el-option v-for="(item, index) in linkTypeL" :key="index" :label="item.name" :value="item.type" />
                </el-select>
            </el-form-item>
            <el-form-item label="链接地址：" v-if="addData.linkType==2">
                <el-input v-model="addData.linkUrl" placeholder="请输入链接地址" class="w460" />
            </el-form-item> -->
            <el-form-item label="排序：">
                <el-input type="number" v-model="addData.sort" placeholder="请输入排序" class="w220" />
            </el-form-item>
            <!-- <el-form-item label="是否显示：" prop="isShow">
                <el-switch v-model="addData.isShow" :active-value="1" :inactive-value="2" />
            </el-form-item> -->
        </el-form>
        
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addShow = false, addData = {}">取消</el-button>
                <el-button type="primary" @click="submit(addData)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>

export default {
    data() {
        return {
            addShow: false,
            addData: {isShow:1},
            uploadUrl: this.$public.uploadUrl,
            linkTypeL: [{ type: 1, name: '不跳转' }, { type: 2, name: '跳转' }],
            list1: [],
            typeL: [{ type: 1, name: '城市页' }, { type: 2, name: '首页' }, { type: 3, name: '赛事' }, { type: 4, name: '认证' }, { type: 5, name: '我的球队' }, { type: 6, name: '球队认证支付' }, { type: 7, name: '球员我的数据' }, { type: 8, name: '公告管理' }, { type: 9, name: '官方公告' },],
            typeS: { 1: '城市页', 2: '首页', 3: '赛事', 4: '认证', 5: '我的球队', 6: '球队认证支付', 7: '球员我的数据', 8: '公告管理', 9: '官方公告' },
            param: {
                pageNumber: 1,
                pageSize: 10,
            },
            loading: false,
            total: 0,
        }
    },

    created() {
        this.getList()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        submit(param){
            let that = this
            that.$api.insertbanner(param).then(res=>{
                that.getList();
                that.addData = {}
                that.addShow = false
                that.$message.success(res.message);
            })
        },
        tanchuang2(bannerId) {
            let that = this;
            this.$msgbox.confirm(
                "是否删除该banner图",
                "删除提醒",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }
            ).then(() => {
                console.log('bannerId', bannerId)
                this.$api.ZbannerDelete({ bannerId }).then(res => {
                    console.log(res);
                    if (res) {
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => { });
        },

        // 规格图片上传成功
        uploadImgSuccess(val) {
            if (val.status == 200) {
                let img = this.utils.Decrypt(val.data);
                this.addData.img = img.path
            }
        },
        getList() {
            let that = this
            that.$api.ZbannerL(that.param).then(res => {
                console.log('列表', res)
                that.list1 = res.records
                that.total = res.total
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
    }

}


</script>
<style lang="scss" scoped>
.manage2 {
    padding: 10px 20px;
    background-color: #fff;
    text-align: left;

    .manage2_button1 {
        width: 115px;
        margin-top: 20px;
        margin-left: 16px;
    }

    .manage2_button2 {
        width: 115px;
        margin-top: 20px;
        margin-left: 10px;
    }

    .manage2_button3 {
        width: 115px;
        margin-top: 20px;
        margin-left: 10px;
    }

}

.list1 {
    background-color: #fff;

    .list1_head1 {
        width: 100px;
    }

    .list1_operate1 {
        width: 100%;
        display: flex;
        justify-content: center;

        .list1_operate1_line1 {
            margin: auto 10px;
        }
    }

    .list1_page1 {
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .list1_page1_title1 {
            font-size: 10px;
            color: #A4A4A4;
        }
    }
}
</style>